import React,{Component} from 'react';
import Util from '../common/util'
import * as URLconstant from '../constant/URLconstant'
import Header from '../common/header'
import SelectMaterial from './selectMaterial'
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView,
    SectionList,
    FlatList,
    SafeAreaView,
} from 'react-native'
export default class materialBank extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            page:1,
            limit:10,
            loaded:false,
            again:true,
            isOver:false,
            goodsList:[]
        };
    }

    componentDidMount() {
        this.getMaterialBank()
    }

    getMaterialBank(){
        let url = URLconstant.GET_MATERIAL_BANK
        let page = this.state.page
        let limit = this.state.limit
        let datakey=[]
        datakey['page']=page
        datakey['limit']=limit
        Util.get(url,datakey,(datas)=>{
            if(datas.status==0){
                let newList = datas.data.goods
                let goodsList=this.state.goodsList;
                Array.prototype.push.apply(goodsList, newList);
                this.setState({
                    loaded:true,
                    goodsList:goodsList
                })
            }
        },(err)=>{

        })
    }


    toGoods(item_type,item_type_str){
        this.props.navigation.push("SelectMaterial",{
            item_type:item_type,
            title:item_type_str,
        })
    }


    _renderRow=({ item })=>{
        return(
            <TouchableOpacity style={styles.goods_item} onPress={()=>this.toGoods(item.item_type,item.item_type_str)}>
                <Image
                    source={{uri:item.image_url?item.image_url:'http://cdn.img.ecduo.cn/ecduo/data/files/Uploads/picture/2019-12/201912061110297833.jpg'}}
                    resizeMode={'cover'}
                    style={{width:(Util.size.width-30)/2,height:(Util.size.width-30)/2}}
                />
                <View style={{paddingVertical:5,alignItems:'center'}}>
                    <Text style={{fontSize:14,color:"#333"}}>{item.item_type_str}</Text>
                </View>
            </TouchableOpacity>
        )
    }


    render(){
        return(
            <SafeAreaView style={{flex:1,backgroundColor:"#fff"}}>
                <Header navigation={this.props.navigation} title={'选择画芯'}/>
                {
                    this.state.loaded==false?
                        <View style={{flex:1}}>
                            {Util.loading()}
                        </View>:
                        <FlatList
                            style={{paddingTop:10}}
                            numColumns={2}
                            columnWrapperStyle={styles.goods_list_item}
                            data={this.state.goodsList}
                            renderItem={this._renderRow}
                            keyExtractor={item => item.item_type}
                        />
                }
            </SafeAreaView>
        )
    }
}
var styles = StyleSheet.create({
    goods_list_item:{
        justifyContent:'space-between',
        paddingHorizontal:10
    },
    goods_item:{
        width:(Util.size.width-30)/2,
        marginBottom:10
    }
})